<template>
    <l-data-panel 
        :label="data.label"
        >
        <div v-for="item in showMdules" :key="item.id"  @click="handleClick(item.moduleId)" class="l-data-board l-data-board-module" style="float:left;" >
            <div class="l-data-board__icon">
                <div class="l-data-board-module-inner"  :style="{'background-color':item.color}">

                </div>
                <i :class="getIcon(item.moduleId)" :style="{color:item.color}" ></i>
            </div>
            <div class="l-data-board__text" >
                <div class="l-data-board__title" >{{$t(getName(item.moduleId))}}</div>
            </div>
        </div>
    </l-data-panel>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    props: ['data','isPreview'],
    data () {
        return {
        }
    },
    computed:{
        ...mapGetters(["modules"]),
        myModules(){
            if(this.loginInfo.f_SecurityLevel == 1 || this.isPreview){
                return this.modules.filter(t=>t.f_EnabledMark == 1)
            }
            return this.modules.filter(item =>{
                if(item.f_EnabledMark == 1){
                    const moduleAuthIds = this.loginInfo.moduleAuthIds || []
                    if(moduleAuthIds.indexOf(item.f_ModuleId) > -1){
                        return true
                    }
                    else{
                        return false
                    }
                }
                else{
                    return false
                }
            })
        },
        showMdules(){
            return this.data.list.filter(t=>this.myModules.findIndex(t2=>t2.f_ModuleId == t.moduleId) != -1)
        }
    },
    methods:{
        getName(id){
            return this.myModules.find(t2=>t2.f_ModuleId == id).f_FullName
        },
        getIcon(id){
            return this.myModules.find(t2=>t2.f_ModuleId == id).f_Icon
        },
        handleClick(id){
            if(!this.isPreview){
                const module = this.myModules.find(t2=>t2.f_ModuleId == id)
                if(module){
                    this.$router.$lrRouter.goto(module)
                }
                
            }
        }
    }
}
</script>

<style lang="scss">
.l-data-board-module{
    width: 120px;
    padding: 40px 0 0 0;
    box-sizing: border-box;
    position: relative;
    .l-data-board-module-inner{
        opacity: 0.1;
        position:absolute;
        top:0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius:50%;
    }
    

    .l-data-board__icon{
        position: relative;
        margin-top: 0;
        top: 0;
        left: 0;
        margin: auto;
        
    }
    .l-data-board__text{
        position: relative;
        top: 0;
        left: 0;
        margin-top: 0;
        text-align: center;
        width: 100%;
    }
}
</style>